<template>
  <div>
    <!-- 在模板中使用 ref 时，我们不需要附加 .value。 -->
    {{ person }}
    {{ count }}
    <!--  普通函数中  -->
    <button @click="fun1">Add1</button>
    <button @click="fun2">Person2</button>

    <button @click="count++">Add1</button>
    <button @click="person.age++">Person</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
const person = ref({
  name: 'John',
  age: 30
})

const fun2 = () => {
  person.value.name = 'John,123'
}

function fun1() {
  count.value++
  person.value.age++
}
</script>

<style lang="scss" scoped></style>
